<template>
  <div class="containerBox">
    <button class="back" @click="back" v-show="$store.state.addVisibel">返回</button>
    <div v-show="!$store.state.addVisibel">
      <el-form  label-width="110px">
        <el-form-item label="顶部图片">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :before-upload="beforeAvatarUpload1"
            :on-success="successUpload"
            :on-error="errorUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <div class="itemBox">
          <el-form-item label="店铺头像">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload2"
              :on-error="errorUpload"
            >
              <div class="flex">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="商家退回地址">
            <el-input
              type="textarea"
              :rows="9"
              placeholder="请输入内容"
              v-model="textarea">
            </el-input>
          </el-form-item>
          <el-form-item id="fullReduction" label="店铺优惠设置">
            满<el-input type="text" placeholder="单行输入" v-model="fullReduction">
          </el-input>包邮
          </el-form-item>
        </div>
      </el-form>
      <p class="label">优惠券</p>
      <div class="topBtn">
        <button class="hover" @click="addCoupon">添加优惠券</button>
      </div>
      <div class="tableList">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="name" label="优惠券名称"></el-table-column>
          <el-table-column prop="Denomination" label="面额"></el-table-column>
          <el-table-column prop="fullE" label="满多少可用"></el-table-column>
          <el-table-column prop="limitCollar" label="每人限领份数"></el-table-column>
          <el-table-column prop="effective" label="有效期限"></el-table-column>
          <el-table-column prop="state" label="状态"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a class="oper" @click="operation('modify',scope.row.applyCommodityList)">适用商品</a>

              <a class="oper" @click="operation('lower')" v-if="scope.row.state === '已上架'">下架</a>

              <a class="oper" @click="operation('upper')" v-if="scope.row.state === '未上架'">上架</a>
              <a class="oper" @click="operation('edit')" v-if="scope.row.state === '未上架'">编辑</a>
              <a class="oper" @click="operation('delete')" v-if="scope.row.state === '未上架'">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <router-view v-show="$store.state.addVisibel"></router-view>
    <el-dialog
      :visible.sync="dialogVisible1"
      width="800px"
      title="适用商品列表"
    >
      <h3 style="font-size:20px;color:#ff77e8;text-align: center">粉红提示：这里没有给到详细的设计稿  具体有哪些参数截图给小阳确定 防止数据结构错漏~~</h3>
      <div>
        <el-table
          ref="multipleTable"
          :data="applyCommodityList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="65"></el-table-column>
          <el-table-column property="name" label="商品名称"></el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 25, 30]"
          :page-size="15"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'shopAdministration',
  data () {
    return {
      currentPage: 1,
      multipleSelection: [],
      dialogVisible1: false,
      // 顶部图片
      dialogVisible: false,
      dialogImageUrl: '',
      // 店铺头像
      imageUrl: '',
      textarea: '',
      fullReduction: '',
      applyCommodityList: [],
      tableData: [
        {
          name: '优惠券名称',
          Denomination: 20,
          fullE: 100,
          limitCollar: 1,
          effective: '2018.10.16-2018.10.17',
          state: '未上架',
          applyCommodityList: [
            {
              name: '适用商品1号',
              id: 123
            },
            {
              name: '适用商品2号',
              id: 321
            },
            {
              name: '适用商品3号',
              id: 213
            },
            {
              name: '适用商品4号',
              id: 231
            }
          ]
        },
        {
          name: '优惠券名称',
          Denomination: 20,
          fullE: 100,
          limitCollar: 1,
          effective: '2018.10.16-2018.10.17',
          state: '已上架',
          applyCommodityList: [
            {
              name: '适用商品11号',
              id: 456
            },
            {
              name: '适用商品12号',
              id: 546
            },
            {
              name: '适用商品13号',
              id: 546
            },
            {
              name: '适用商品14号',
              id: 645
            }
          ]
        }
      ]
    }
  },
  mounted () {
    this.$store.commit('addVisibelFn', false)
  },
  methods: {
    back () {
      this.$router.push({name: 'shopAdministration'})
      this.$store.commit('addVisibelFn', false)
    },
    // 顶部图片
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    beforeAvatarUpload1 (file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传主图只能是 JPG 和 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传主图单张图片大小不能超过 2MB!请压缩')
      }
      return (isJPG || isPNG) && isLt2M
    },
    successUpload (response, file, fileList) {

    },
    errorUpload (err) {
      alert(err)
      console.log(err)
    },
    // 详情
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload2 (file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG && !isPNG) {
        this.$message.error('上传详情图片只能是 JPG 和 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传详情图片大小不能超过 5MB!')
      }
      return (isJPG || isPNG) && isLt2M
    },
    operation (type, item) {
      if (type === 'modify') {
        console.log(item)
        this.applyCommodityList = item
        this.dialogVisible1 = true
      } else if (type === 'lower') {
        this.$message('下架操作')
      } else if (type === 'upper') {
        this.$message('上架操作')
      } else if (type === 'edit') {
        this.addCoupon()
        this.$message('编辑操作')
      } else if (type === 'delete') {
        this.$message('删除')
      }
    },
    addCoupon () {
      this.$message('添加优惠券')
      this.$store.commit('addVisibelFn', true)
      this.$router.push({name: 'addCoupon'})
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    }
  }
}
</script>

<style scoped lang="less">
  .containerBox{
    /deep/ .el-form > .el-form-item > label, /deep/ .el-form  .itemBox >  .el-form-item > label{
      padding-right:15px;
      color: #008fff;
    }
    /deep/ .avatar-uploader {
      .el-upload {
        background: #fff;
        width: 186px;
        height: 186px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .flex {
        width: 100%;
        height: 100%;
      }
      .avatar {
        max-width: 100%;
        max-height: 100%;
        display: block;
      }
    }
    .itemBox{
      overflow: hidden;
      /deep/ .el-form-item{
        width:30%;
        float: left;
      }
    }
    #fullReduction{
      height:186px;
      float: right;
      /deep/ label{
       display:block;
        width:100% !important;
        text-align: left;
      }
      /deep/ .el-form-item__content{
        margin-left: 0 !important;
        text-align: center;
        /deep/ .el-input{
          width:150px !important;
          margin:0 10px;
          margin-top:30px !important;
        }
      }
    }
    .tableList {
      /deep/ .el-table .cell {
        color: #000;
        font-weight: normal;
        text-align: center;
        line-height: 25px;
      }
      /deep/ .el-table__body-wrapper tbody tr * {
        font-size: 14px;
      }
      /deep/ .el-table__body-wrapper tbody tr td .cell .tagS {
        border: 1px solid #c7c7c7;
        padding: 5px;
        margin-bottom: 5px;
        margin-right: 5px;
      }
      /deep/ .el-table__body-wrapper tbody tr td:last-child .cell  {
        text-align: left;
      }
    }
    p.label{
      color: #008fff;
      padding-left: 40px;
      font-size: 14px;
      margin-top:15px;
    }
    .topBtn{
      background: #fff;
      margin: 10px 0;
      padding: 10px 40px;
      button{
        padding:5px;
        background: #008fff;
        color:#fff;

      }
    }
    .pagination{
      margin-top:50px;
    }
  }
</style>
